<template>
    <div>
        <Card>
            {{remarkInput}}
            <Row class="form-row">
                <Form :model="filters" label-position="right" :label-width="90" inline ref="formInline">
                    <FormItem label="商户单号">
                        <div class="filters-input">
                            <Input v-model="filters.tradeNo" placeholder="商户单号" clearable/>
                        </div>
                    </FormItem>
                    <FormItem label="停车库">
                        <div class="filters-input">
                            <el-select v-model="filters.parkingId" placeholder="请选停车库" filterable clearable
                                       no-data-text="暂无数据">
                                <el-option v-for="item in parkingList" :value="item.id" :key="item.id"
                                           :label="item.parkingName"></el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="车牌号">
                        <div class="filters-input">
                            <Input v-model="filters.plateNumber" placeholder="车牌号" clearable/>
                        </div>
                    </FormItem>
                    <FormItem label="支付单号">
                        <div class="filters-input">
                            <Input v-model="filters.transactionId" placeholder="支付单号" clearable/>
                        </div>
                    </FormItem>
                    <FormItem label="业务类型">
                        <div class="filters-input">
                            <el-select v-model="filters.bizType" placeholder="请选业务类型" filterable clearable>
                                <el-option value="0" label="停车支付"></el-option>
                                <el-option value="1" label="月租车充值"></el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="支付类型">
                        <div class="filters-input">
                            <el-select v-model="filters.payType" placeholder="请选支付类型" filterable clearable>
                                <el-option value="1" label="微信"></el-option>
                                <el-option value="2" label="支付宝"></el-option>
                                <el-option value="3" label="现金"></el-option>
                                <el-option value="4" label="微信云支付"></el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="支付状态">
                        <div class="filters-input">
                            <el-select v-model="filters.payStatus" placeholder="请选支付状态" filterable clearable>
                                <el-option value="1" label="未支付"></el-option>
                                <el-option value="2" label="已支付"></el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="起始日期">
                        <div class="filters-input">
                            <DatePicker type="daterange" v-model="filters.theDate" placeholder="请选择日期"
                                        clearable></DatePicker>
                        </div>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" icon="ios-search" @click="handleQuery('formInline')">搜索</Button>
                    </FormItem>
                </Form>
            </Row>

            <el-table stripe border :loading="tableLoading" :data="tableData" ref="table" style="width: 100%">
                <el-table-column type="expand">
                    <template slot="empty">暂无数据</template>
                    <template slot-scope="props">
                        <div class="ParkingDetail">
                            <div class="parkTitle">
                                标题：{{props.row.body||"无"}}
                            </div>
                            <div class="parkInfo">
                                详情：{{props.row.detail||"无"}}
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <template slot="empty">暂无数据</template>
                <el-table-column prop="tradeNo" label="商户单号"></el-table-column>
                <el-table-column prop="carNum" label="车牌号"></el-table-column>
                <el-table-column prop="parkingId" label="停车场Id"></el-table-column>
                <el-table-column prop="bizType" label="业务类型" :formatter="formatterBizType"></el-table-column>
                <el-table-column prop="payType" label="支付类型" :formatter="formatterPayType"></el-table-column>
                <el-table-column prop="body" label="标题"></el-table-column>
                <el-table-column prop="payFee" label="金额"></el-table-column>
                <el-table-column prop="createdAt" label="下单时间"></el-table-column>
                <el-table-column prop="payStatus" label="支付状态" :formatter="formatterPayStatus"></el-table-column>
                <el-table-column prop="transactionId" label="支付单号"></el-table-column>
            </el-table>

            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  id="lyPage"
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>

        </Card>

    </div>
</template>


<script>
    //线上下载模板地址
    import baseURL from "_conf/url";
    import Treeselect from "@riophae/vue-treeselect";
    import Cookies from "js-cookie";
    import {TOKEN_KEY} from "@/libs/util";

    import moment from "moment"
    //线上上传账单地址
    const act = baseURL + "/api/bill/upload";

    export default {
        data() {
            return {
                // 总额
                remarkInput: "",
                //查询条件
                filters: {},
                //页码
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                modelRemarks: {},
                //车库列表
                parkingList: [],
                status: [],
                costType: [],
                tableData: [],
                //表单提交状态
                modal: {},
                tableLoading: false,
            }
        },
        created: function () {
            this.getParking();
            this.loadData();
        },
        methods: {
            //加载数据
            loadData: function () {
                if (this.tableLoading) return;
                this.tableLoading = true;
                let params = this.filters;
                params.pageNum = this.pageNum;
                params.pageSize = this.pageSize;

                console.log(params)

                //与后台交换数据
                this.postRequest("/api/parking/order/list", params).then(res => {
                    this.tableLoading = false;
                    if (res.code == 20000) {
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                    } else {
                        this.tableData = [];
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            getCostType: function (value) {
                this.getRequest(
                    "/api/costType/getCostTypeByhousingId?housingId=" + value
                ).then(res => {
                    // console.log(res);
                    if (res.code == 20000) {
                        this.costType = res.data;
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            getParking: function () {
                this.getRequest("/api/parking/all").then(res => {
                    this.parkingList = res.data;
                });
            },
            //查询
            handleQuery(name) {
                if(this.filters.theDate[0] != null && this.filters.theDate[0] != ''
                    && this.filters.theDate[1] != null && this.filters.theDate[1] != ''){
                    this.filters.theDate[0] = moment(this.filters.theDate[0]).format("YYYY-MM-DD");
                    this.filters.theDate[1] = moment(this.filters.theDate[1]).format("YYYY-MM-DD");
                }
                this.loadData();
            },
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
            //支付状态
            formatterPayStatus(row, column) {
                if (row.payStatus == 2) {
                    return "已支付";
                } else if (row.payStatus == 1) {
                    return "未支付";
                } else {
                    return "--"
                }
            },
            // 业务类型 bizType
            formatterBizType(row, column) {
                if (row.bizType == 0) {
                    return "停车支付";
                } else if (row.bizType == 1) {
                    return "月租车充值";
                } else {
                    return "--"
                }
            },
            //支付类型 payType 1 微信 2 支付宝 3 现金 4 微信云支付
            formatterPayType(row, column) {
                if (row.payType == 1) {
                    return "微信";
                } else if (row.payType == 2) {
                    return "支付宝";
                } else if (row.payType == 3) {
                    return "现金";
                } else if (row.payType == 4) {
                    return "微信云支付";
                } else {
                    return "--"
                }
            }
        }
    }
    ;
</script>

<style lang="less">
    #lyPage {
        display: inline-block;
    }

    .billBox {
        .bill-item {
            width: 100%;
            line-height: 30px;
            span {
                padding-right: 20px;
            }
        }
    }


</style>
